import './index.css'
import { Button, Flex, Avatar, Space, Drawer, Empty,Input, Select, Carousel,FloatButton,Tooltip,Modal   } from 'antd';
import React, { useState,useRef,useEffect } from 'react';
import { GoogleOutlined, InsertRowLeftOutlined } from '@ant-design/icons';
import chyll from '../../../image/钱钱.webp'
let Brand = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
    return (
        <div>
                <div style={{ overflowX: 'hidden', overflowY: 'scroll', width: '100%', height: '616px' }}>
                 <div style={{color:'#fff',margin:'15px'}}>
                   <InsertRowLeftOutlined />
                    <span style={{marginLeft:'15px'}}>品牌模板</span>
                  </div>
                  <div style={{ width: '95%', height: '120px', border: '1px solid #5D5D5E', marginLeft: '10px', borderRadius: '10px', backgroundColor: '#343536', textAlign: 'center' }}>
                    <span style={{ margin: '20px', color: '#fff' }}>设置现成可用的模板来维持品牌风格的一致性。</span>
                    <Button onClick={showModal} style={{width:'90%',height:'40px',fontWeight: 'bold',fontSize:'16px',marginTop:'20px'}}>试试Canva可画高级版</Button>
      <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
              <img src={chyll} />
              <h1 style={{color:'red'}}>没钱?想想这些年有没有好好工作!!!好吧</h1>
      </Modal>
                  </div>
                  <div style={{color:'#fff',margin:'15px'}}>
                    <GoogleOutlined />
                    <span style={{marginLeft:'15px'}}>品牌工具箱</span>
                  </div>
                  <b style={{color:'#fff',margin:'15px'}}>logo</b>
                  <Button chyll onClick={showModal} style={{ width: '90%', height: '40px', color: '#fff', margin: '10px 18px 25px 18px', fontWeight: 'bold' }} ghost>升级并添加login</Button>
                  <b style={{color:'#fff',margin:'15px'}}>颜色</b>
                  <Button onClick={showModal} style={{ width: '90%', height: '40px', color: '#fff', margin: '10px 18px 25px 18px', fontWeight: 'bold' }} ghost>添加品牌颜色</Button>
                  <b style={{color:'#fff',margin:'15px'}}>字体</b>
                  <Button onClick={showModal} style={{width:'90%',height:'40px',color:'#fff',margin:'10px 18px 25px 18px',fontWeight:'bold'}} ghost>升级并添加字体</Button>
                  <b style={{color:'#fff',margin:'15px'}}>品牌调性</b>
                  <Button onClick={showModal} style={{width:'90%',height:'40px',color:'#fff',margin:'10px 18px 25px 18px',fontWeight:'bold'}} ghost>升级并添加品牌调性</Button>
                  <b style={{color:'#fff',margin:'15px'}}>图片</b>
                  <Button style={{width:'90%',height:'40px',color:'#fff',margin:'10px 18px 25px 18px',fontWeight:'bold'}} ghost>升级并添加图片</Button>
                  <b style={{color:'#fff',margin:'15px'}}>插图</b>
                  <Button style={{ width: '90%', height: '40px', color: '#fff', margin: '10px 18px 25px 18px', fontWeight: 'bold' }} ghost>升级并添加插图</Button>
                  <b style={{color:'#fff',margin:'15px'}}>图标</b>
                  <Button style={{width:'90%',height:'40px',color:'#fff',margin:'10px 18px 25px 18px',fontWeight:'bold'}} ghost>升级并添加图标</Button>
                </div>
              </div>
)
}

export default Brand